<template>
  <div class="wrapper">
    <v-head></v-head>
    <v-sidebar></v-sidebar>
    <div class="content-box" :class="{'content-collapse':collapse}">
      <div class="content_wrapper">
        <v-tags></v-tags>
        <div class="content" style="flex:1;">

          <!--<el-breadcrumb separator="|">-->
          <!--<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
          <!--{{ item.name }}-->
          <!--</el-breadcrumb-item>-->
          <!--</el-breadcrumb>-->

          <div class="content_inner">
            <transition name="move" mode="out-in">
              <keep-alive :include="tagsList">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>

        </div>
        <v-footer></v-footer>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
  .content_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
</style>

<script>
  import vHead from './Header.vue';
  import vSidebar from './Sidebar.vue';
  import vTags from './Tags.vue';
  import vFooter from './Footer.vue';
  import bus from '../../views/common/bus';

  export default {
    data() {
      return {
        tagsList: [],
        collapse: false
      }
    },
    components: {
      vHead, vSidebar, vTags, vFooter
    },
    created() {
      bus.$on('collapse', msg => {
        this.collapse = msg;
      })

      // 只有在标签页列表里的页面才使用 keep-alive，即关闭标签之后就不保存到内存中了。
      bus.$on('tags', msg => {
        let arr = [];
        for (let i = 0, len = msg.length; i < len; i++) {
          msg[i].name && arr.push(msg[i].name);
        }
        this.tagsList = arr;
      })
    }
  }
</script>
